<template>
  <Container class="storesign-edit">
    <!-- 基础设置 -->
    <div slot="header" class="container-header title title-center">
      {{ mode === 'info' ? '查看' : '编辑' }}签约门店
      <Button
        size="large"
        class="fl btn-back"
        icon="ios-arrow-back"
        @click="jumpPrevPage"
      >返回</Button>
    </div>
    <Tabs v-model="tab" type="card" size="small">
      <Button v-if="mode==='info'" slot="extra" type="primary" class="mr" @click="pointEdit">积分奖惩</Button>
      <Button v-if="mode==='info'" slot="extra" type="primary" class="mr" @click="rebateEdit">返利奖惩</Button>
      <TabPane label="基础信息" name="tab0" />
      <TabPane label="签约信息" name="tab1" />
      <TabPane v-if="mode==='edit'" label="修改密码" name="tab2" />
      <TabPane label="门店照片" name="tab3" />
      <TabPane label="门店身份证" name="tab4" />
      <TabPane label="签约记录" name="tab5" />
      <TabPane label="扫码地址" name="tab6" />
      <TabPane label="变更记录" name="tab7" />
      <TabPane label="积分变更记录" name="tab8" />
      <TabPane label="返利变更记录" name="tab9" />
    </Tabs>
    <div class="tab-content">
      <StoreBaseInfoItem v-show="tab=='tab0'" ref="StoreInfoItem" :form="form" />
      <StoreInfoItem v-show="tab=='tab1'" ref="StoreInfoItem" :is-edit="mode==='edit'" :form="form" :isOpen="isOpen" />
      <ChangePassword v-show="tab=='tab2'" :form="form" />
      <StorePictures v-show="tab=='tab3'" :is-edit="mode==='edit'" :form="form" />
      <IDcardPictures v-show="tab=='tab4'" ref="IDcardPictures" :is-edit="mode==='edit'" :form="form" />
      <SignRecordItem v-if="tab=='tab5'" :form="form" />
      <AddressMap v-if="tab=='tab6'" :is-edit="mode==='edit'" :form="form" />
      <ChangeInfo v-if="tab=='tab7'" :form="form" />
      <PointRecordItem v-if="tab=='tab8'" :form="form" />
      <RebateRecordItem v-if="tab=='tab9'" :form="form" />
    </div>
    <div v-if="mode==='edit'" slot="footer" class="container-footer bg-white">
      <!-- <Button :loading="btnLoading" type="primary" size="large" class="ml" @click="onSave">保存</Button> -->
      <Button :loading="btnLoading" type="primary" size="large" class="ml" @click="getCheck">保存</Button>
      <Button type="primary" size="large" class="ml" @click="jumpPrevPage">取消</Button>
    </div>
    <Loader :status="status" @refresh="getInfo" />
    <PointModel ref="point-model" />
    <RebateModel ref="rebate-model" />
    <EditItem ref="editItem" @complete="getData"></EditItem>
  </Container>
</template>
<script>
import StoreBaseInfoItem from './edit/StoreBaseInfoItem'
import StoreInfoItem from './edit/StoreInfoItem'
import ChangePassword from './edit/ChangePasswordItem'
import StorePictures from './edit/StorePicturesItem'
import SignRecordItem from './edit/SignRecordItem'
import ChangeInfo from './edit/ChangeInfoItem'
import AddressMap from './edit/AddressMapItem'
import IDcardPictures from './edit/IDcardPicturesItem'
import PointRecordItem from './edit/PointRecordItem'
import RebateRecordItem from './edit/RebateRecordItem'
import PointModel from './list/PointModelItem'
import RebateModel from './list/RebateModelItem'
import EditItem from './edit/EditItem'

export default {
  name: '',
  components: {
    StoreBaseInfoItem,
    StoreInfoItem,
    ChangePassword,
    StorePictures,
    ChangeInfo,
    AddressMap,
    IDcardPictures,
    SignRecordItem,
    PointRecordItem,
    RebateRecordItem,
    PointModel,
    RebateModel,
    EditItem
  },
  data () {
    return {
      tab: 'tab1',
      mode: 'edit',
      id: '',
      form: {
        cardz: [],
        cardf: [],
        yyzz: [],
        storeContractAgreementDTOList: [],
        storeContractChangeLogDTOList: [],
        empowerBrandDTOList: [],
        idPhoneLogList: [],
        storeContractDTO: {
          distributorId: '',
          distributorName: '',
          storeContractBrandDTOList: [],
          storeContractAgreementDTO: {},
          storeContractExtDTO: {}
        },
        storeDTO: {}
      },
      status: 'pass',
      btnLoading: false,
      isOpen: null
    }
  },
  created () {
    if (this.$route.name === 'manage/storesign/info') {
      this.mode = 'info'
    }
    this.id = this.$route.query.id
    this.getData()
  },
  methods: {
    getCheck () {
      let params = {
        contractId: this.$route.query.id,
        storeTypeId: this.form.storeContractDTO.storeTypeId
      }
      this.$ajaxPost('/contract_store/check_store_type_enable', params).then(res => {
        this.isOpen = res
        let v = this.$refs.IDcardPictures.valideForm()
        let bs = this.$refs.StoreInfoItem.valideForm()
        if (!bs) {
          this.$Message.warning('门店名称未输入')
          this.tab = 'tab1'
          return
        }
        if (!v) {
          this.$Message.warning('联系人姓名未输入')
          this.tab = 'tab4'
          return
        }
        if (this.isOpen) {
          this.$refs.editItem.updateForm(this.form.storeContractDTO)
        } else {
          this.btnLoading = true
          this.$jsonPost('/contract_store/update', this.form.storeContractDTO).then(res => {
            this.btnLoading = false
            this.$Message.success('提交成功')
            this.getData()
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    },
    getData () {
      if (!this.id) return
      this.status = 'loading'
      this.$ajaxGet(`/contract_store/detail/${this.id}`).then(res => {
        this.status = 'pass'
        this.form = Object.assign(this.form, res)
        if (!this.form.storeContractDTO.storeContractExtDTO) {
          this.form.storeContractDTO.storeContractExtDTO = {}
        }
        if (!this.form.storeContractDTO.storeContractAgreementDTO) {
          this.form.storeContractDTO.storeContractAgreementDTO = {}
        }
      }).catch(() => {
        this.status = 'error'
      })
    },
    jumpPrevPage () {
      this.$router.back()
    },
    pointEdit () {
      this.$refs['point-model'].updataForm(this.id)
    },
    rebateEdit () {
      this.$refs['rebate-model'].updataForm(this.id)
    }
  }
}
</script>
